<template>
  <div>
    <div :class="activity.templateType == 3 ? 'mb3-index-bg' : 'c-bg-white'" v-if="isActivity == 1" @touchmove.stop="playAudio()">
      <div class="c-pb80">
        <div class="c-w100 c-p">
          <img :src="$addXossFilter(activity.cover, require('@/assets/activity_defult.png'))" class="c-w100" />
          <div class="c-pa c-p-r0 c-p-t40 c-fs22 c-fc-white c-pl20 c-pr16 c-pz99"
            :class="activity.templateType == 2 ? 'mb2-detail-bg c-hh68' : activity.templateType == 3 ? 'mb3-detail-bg fc844813 c-hh48 c-pt8' : 'activities-class c-pv12'" @click="goItem(-1)">活动介绍</div>
          <div class="c-pa c-p-t32 c-p-l32 c-ww50 c-hh50" @click="playMusic" v-if="backgroundMusic">
            <img :src="require('@/assets/i/wap/voting/play.png')" class="c-w100 c-h yqAnimation" ref="music" v-if="isPlayingMusic">
            <img :src="require('@/assets/i/wap/voting/pause.png')" class="c-w100 c-h yqAnimation pause" ref="music" v-else>
          </div>
          <audio id="audio" class="c-pf c-p-l-100" loop="loop">
            <source id="audioSource" src="" type="audio/mpeg" />
          </audio>
        </div>
        <div class="c-ph24 c-p">
          <div class="c-ww100 c-hh100 c-pa c-p-t24 c-p-r32" v-if="activity.status == 4"><img src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/voting/voteEnd.png" alt=""></div>
          <div class="c-fs28 c-pt32 c-fw-b" :class="activity.templateType == 3 ? 'c-fc-white' : 'c-fc-xblack'">{{activity.name}}</div>
          <div class="c-pt30 c-pb20 c-fs24" :class="activity.templateType == 3 ? 'c-fc-white' : 'c-fc-gray'">比赛时间：{{activity.startAt}} — {{activity.endAt}}</div>
          <div class="c-pb20 c-fs24" :class="activity.templateType == 3 ? 'c-fc-white' : 'c-fc-gray'">报名时间：{{activity.enrollStartAt}} — {{activity.enrollEndAt}}</div>
          <div class="c-fs24" :class="activity.templateType == 3 ? 'c-fc-white' : 'c-fc-gray'">{{voteCustomName}}规则：每个微信号{{activity.voteType == 1 ? '活动期间' : '每日'}}可投{{activity.voteNum}}次</div>
          <!-- 模板 -->
          <div class="c-flex-row c-justify-sa c-mv32 c-w100"
            :class="activity.templateType == 3 ? 'c-bg-white c-pv28 c-fc-xblack c-br10' : activity.templateType == 2 ? 'c-pv24 mb2-border mb2bg c-fc-white c-br16' : 'vot-shaw c-bg-white c-pv28 c-fc-xblack c-br10'">
            <div class="c-flex-column">
              <span class="c-textAlign-c c-fs28">{{activity.playerNum || 0}}</span>
              <span class="c-textAlign-c c-fs20" :class="activity.templateType == 2 ? 'c-mt8 c-fc-white' : 'c-mt20 c-fc-sblack'">参与选手</span>
            </div>
            <div class="c-flex-column">
              <span class="c-textAlign-c c-fs28">{{playerVoteNum || 0}}</span>
              <span class="c-textAlign-c c-fs20" :class="activity.templateType == 2 ? 'c-mt8 c-fc-white' : 'c-mt20 c-fc-sblack'">累计{{voteCustomName}}</span>
            </div>
            <div class="c-flex-column">
              <span class="c-textAlign-c c-fs28">{{activity.visitNum || 0}}</span>
              <span class="c-textAlign-c c-fs20" :class="activity.templateType == 2 ? 'c-mt8 c-fc-white' : 'c-mt20 c-fc-sblack'">访问量</span>
            </div>
          </div>
          <div class="c-flex-row c-justify-sb" :class="activity.templateType == 3 ? 'c-p' : activity.templateType == 2 ? 'mb2bg mb2-border c-br16 c-pv10 c-pl10' : ''">
            <div class="c-flex-row c-aligni-center c-ph24 c-flex-grow1"
              :class="activity.templateType == 3 ? 'c-bg-white c-hh60 c-br10' : activity.templateType == 2 ? 'mb2-border c-bg-white c-hh52 c-br4' : 'btn-search-bar search-bg c-mv16'">
              <span class="iconfont c-fs24">{{activity.templateType != 2 && activity.templateType != 3 ? '&#xe6d6;' : ''}}</span>
              <input class="c-bd0 c-fs24" @blur="searchBlur" @focus="searchFocus" @keyup.enter="clickSearch" placeholder="请输入编号或者名称搜索" v-model="searchValue"
                :class="activity.templateType == 3 ? 'c-bg-white c-ml16' : activity.templateType == 2 ? '' : 'search-bg c-ml16'" />
            </div>
            <span class=""
              :class="activity.templateType == 2 ? 'c-textAlign-c c-fs30 iconfont c-fc-white c-ww76 c-lh48' : activity.templateType == 3 ? 'iconfont c-bg-white c-fc-gray c-hh60 c-pa c-p-t0 c-p-r20 c-lh64 c-fs36 c-fw-b' : 'c-ml20 theme-fc c-fs24 c-lh90'"
              @click="clickSearch" v-if="showSearch || activity.templateType == 2 || activity.templateType == 3">{{activity.templateType == 3 || activity.templateType == 2 ? '&#xe6d6;' : '搜索'}}</span>
          </div>
          <!-- </div> -->
          <section class="mt26" :class="activity.templateType == 3 ? '' : 'c-bg-white'">
            <div class="c-flex-row c-aligni-center c-justify-sb c-flexw-wrap" v-if="playerList.length > 0">
              <div v-for="(item, index) in playerList" :key="index" @click="goItem(item.id)" class="c-ww280 c-pb32">
                <div class="c-ww280 c-hh280 c-p c-text-hidden"
                  :style="{backgroundImage:'url(' + item.images[0] + ')', backgroundSize:'cover', backgroundRepeat: 'no-repeat', backgroundPosition: 'center center' }"
                  :class="activity.templateType == 3 ? 'c-br-tl16 c-br-tr16' : 'c-br16'">
                  <!-- <img :src="item.source == 1 ? item.images[0] : item.headimgurl || require('@/assets/defult_head.png')" class="c-ww280 c-hh280 c-br16 img" alt /> -->
                  <div class="c-pa c-p-l0 c-w100 num-top">
                    <span class="c-ph8 c-pv8 c-textAlign-c c-fs20 num-border"
                      :class="activity.templateType == 2 ? 'bgFF5947 c-opacity80 c-fc-white' : activity.templateType == 3 ? 'bgFFE562 fc844813' : 'theme-bg c-opacity80 c-fc-white'">{{item.number}}号</span>
                  </div>
                  <div class="c-fs24 timeShow c-hh50 c-lh50" @click.stop="clickVote(item.id, index)">给TA{{voteCustomName}}</div>
                </div>
                <div class="c-ww280 c-ph16 c-pt16" :class="activity.templateType == 3 ? 'c-bg-white c-br-bl10 c-br-br10 c-pb16' : ''">
                  <div class="c-text-ellipsis1 c-mb16 c-fs24">{{item.name}}</div>
                  <div class="c-flex-row c-aligni-center">
                    <div class="c-fc-gray c-fs20">{{item.voteNum}}票</div>
                  </div>
                </div>
              </div>
            </div>
            <loading-status-tem :dataStatus="dataStatus" v-if="playerList.length > 0"></loading-status-tem>
            <div v-if="playerList.length == 0" class="c-mv32">
              <img :src="require('@/assets/i/wap/voting/noData.png')" alt="" class="c-m-0auto c-ww240 c-hh170"/>
              <div class="c-textAlign-c c-fs24 c-mt20" :class="activity.templateType == 3 ? 'c-fc-white' : 'c-fc-sblack'">暂无选手</div>
            </div>
          </section>
        </div>
      </div>
      <div class="c-pf c-p-b0 c-w100 c-maxw640" :class="activity.templateType == 2 ? '' : 'vot-shaw'">
        <div class="c-fs20 c-fc-white c-w100 c-pv15 c-textAlign-c c-bg-pink" v-if="activity.status == 4">活动已结束</div>
        <div class="c-flex-row c-justify-sa c-bg-white c-fs28" :class="activity.templateType == 2 || activity.templateType == 3 ? 'c-pv12 c-hh100 c-lh72' : 'c-pv30'">
          <div class="c-flex-grow1 c-textAlign-c"
            :class="activity.templateType == 2 ? 'but-bg2 c-fc-white' : activity.templateType == 3 ? ((activity.status != 2 || activity.isOnlineEnroll != 1) && activity.playerId < 1) ? 'but-bg3 bg-size40' : 'but-bg3 bg-size70' : 'c-bd-r1-mgray theme-fc'"
            @click="goRank">{{activity.status == 4 ? '查看结果' : activity.status == 2 ? '查看排行' : '活动未开始'}}</div>
          <div class="c-flex-grow1 c-textAlign-c" :class="activity.templateType == 2 ? 'but-bg2 c-fc-white' : activity.templateType == 3 ? 'but-bg3' : 'theme-fc'" @click="goToSingUp"
            v-if="(activity.status == 2 && activity.isOnlineEnroll == 1) || activity.playerId > 0">{{activity.playerId > 0 ? '我的报名' : '在线报名'}}</div>
        </div>
      </div>
      <captcha-pop :showCaptcha="showCaptcha" @hidCaptcha="hidCaptcha" @clickConfirm="clickConfirm"></captcha-pop>
    </div>
    <offical-account :showAccountQcode="showAccountQcode" :desc="descAccount" :imgSrc="mpQrcodeImg" @hideDialog="hideDialog"></offical-account>
    <div v-if="isActivity == 2" class="c-mt80">
      <img :src="require('@/assets/i/wap/voting/noData.png')" alt="" class="c-m-0auto c-ww240 c-hh170"/>
      <div class="c-textAlign-c c-fs24 c-fc-sblack c-mt20">活动不存在</div>
    </div>
    <div v-if="isShowVipTip">
      <div class="masker" @click="isShowVipTip = false"></div>
      <div class="box c-textAlign-c c-pf c-p-tp50 c-p-tl50 c-translate-xy-50 c-pz1000">
        <div class="c-w100 boxContent c-bg-white c-pv56 c-br20">
          <img :src="require('@/assets/i/wap/voting/upgradeVip.png')" alt="" class="c-ww180 c-mlr-auto">
          <div class="c-fs28 c-fc-sblack c-mt48">只有会员才能进行{{voteCustomName}}</div>
          <div class="c-fc-white theme-bg-gradient c-br28 c-ww220 c-hh56 c-lh56 c-mt40 c-fs24 c-mlr-auto" @click="goVipUp">购买会员</div>
        </div>
        <div class="iconfont c-mt40 c-fc-white c-fs50" @click="isShowVipTip = false">&#xe84e;</div>
      </div>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import captchaPop from "@/components/templates/common/captchaPop.vue"
import officalAccount from '@/components/templates/common/officalAccount';
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
const IS_IOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
let isFirst = true;
let pageIndex = 1
let LIMIT = 10;
let isLoading = false
export default {
  name: "votingActivity",
  components: {
    loadingStatusTem,
    captchaPop,
    officalAccount
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      isiOS: navigator.userAgent.indexOf('IOSLogin') > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1,
      voteCustomName: localStorage.getItem("voteCustomName"),
      activity: null,
      playerList: [],
      voteId: '',
      detailId: 0,
      playerId: 0,
      playerIndexId: 0,
      showSearch: false,
      searchValue: '',
      hasNum: 0,
      showCaptcha: false,
      showAccountQcode: false,
      mpQrcodeImg: '',
      isActivity: 0,
      playerVoteNum: 0,
      captchaIndex: 0,
      onLine: true,
      dataStatus: 'HAS_MORE_DATA',
      isVote: false,
      isPlayingMusic: false,
      backgroundMusic: '',
      isVipVote: '', //vip投票0关闭 1开启
      upgradeMemberJump: '', //1跳到升级vip页面 2跳到升级svip页面
      isShowVipTip: false,
      bindPhoneSetting: null,
      disableEnroll: 0
    }
  },
  created() {
    utilJs.appShare(this);
  },
  computed: {
    descAccount() {
      let descAccount = this.isVote ? `关注公众号后可参与${this.voteCustomName}` : '关注公众号后可报名参赛';
      return descAccount;
    }
  },
  mounted() {
    window.addEventListener('online', this.lineStatus); // 离线到上线
    window.addEventListener('offline', this.lineStatus); // 上线到离线
  },
  methods: {
    // 关闭关注二维码后获取关注情况
    hideDialog() {
      this.showAccountQcode = false
      this.getVote()
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.playerList.length > 0) {
          this.getPlayerList();
        }
      });
    },
    // 验证码投票确定
    clickConfirm(code) {
      let url = `${global.apiurl}activity/vote/clickVote/${this.playerIndexId}?actId=${this.detailId}&captcha=${code.captcha}&captchaKey=${code.captchaKey}`
      this.votePlayer(url, this.captchaIndex)
    },
    //断网监听
    lineStatus(aaa) {
      this.onLine = navigator.onLine
    },
    //隐藏验证码输入框
    hidCaptcha() {
      this.showCaptcha = false
      isLoading = false
    },
    //点击投票
    clickVote(indexId, index) {
      if (this.activity.status != 2) {
        let text = this.activity.status == 3 ? '活动未开始' : '活动已结束'
        this.$showCjToast({
          text: text,
          type: "warn",
        });
        isLoading = false
        return
      }
      if (this.isVipVote && this.activity.vipType == 1) {
        this.isShowVipTip = true;
        return;
      }
      if (this.activity.isAttensionVote == 1 && !this.activity.isSubscribe) { //关注公众号投票
        this.isVote = true
        this.showAccountQcode = true
        return
      }
      if (this.hasNum == 0 || !this.onLine) {
        let text = this.hasNum == 0 ? `,您的${this.voteCustomName}次数已用完` : '';
        this.$showCjToast({
          text: `${this.voteCustomName}失败${text}`,
          type: "warn",
        });
        return
      }
      if (this.activity.isCaptchaVote == 1) {
        if (isLoading) {
          return
        }
        isLoading = true
        this.showCaptcha = true
        this.playerIndexId = indexId
        this.captchaIndex = index
      } else {
        let url = `${global.apiurl}activity/vote/clickVote/${indexId}?actId=${this.detailId}`
        this.votePlayer(url, index)
      }
    },
    //投票
    votePlayer(url, index) {
      utilJs.getMethod(url, (res) => {
        this.hasNum = res.hasNum
        let text = `您当前还剩下${this.hasNum}次${this.voteCustomName}机会`
        this.$showCjToast({
          text: `${this.voteCustomName}成功,${text}`,
          type: "success",
        });
        this.playerList[index].voteNum = this.playerList[index].voteNum + 1
        this.playerVoteNum = res.activityVoteNum
        this.showCaptcha = false
        isLoading = false
      }, err => {
        isLoading = false
      })
    },
    // 搜索获取焦点
    searchFocus() {
      this.showSearch = true
    },
    // 搜索失去焦点
    searchBlur() {
      if (this.searchValue == '') {
        this.showSearch = false
        this.clickSearch()
      }
    },
    //获取活动
    getVote() {
      let url = `${global.apiurl}activity/vote/indexActivity/${this.detailId}`
      utilJs.getMethod(url, (res) => {
        setDocumentTitle(res.name);
        this.activity = res
        localStorage.setItem('voteMb', res.templateType ? res.templateType : 1)
        this.playerVoteNum = res.playerVoteNum
        this.isActivity = 1
        this.hasNum = res.hasNum
        this.voteId = res.id
        this.playerId = res.playerId
        this.mpQrcodeImg = res.qrCode.qrcode
        this.isVipVote = res.isVipVote
        this.upgradeMemberJump = res.upgradeMemberJump

        let nt = (new Date()).getTime();
        let st = utilJs.getTimeByDate(this.activity.enrollStartAt);
        let et = utilJs.getTimeByDate(this.activity.enrollEndAt);
        if (nt < st) {
          this.disableEnroll = 1;
        }
        if (nt > et) {
          this.disableEnroll = 2;
        }

        let startTime = this.activity.startAt.replace(/-/g, "/").split(':')
        let endTime = this.activity.endAt.replace(/-/g, "/").split(':')
        let enrollStartAt = this.activity.enrollStartAt.replace(/-/g, "/").split(':')
        let enrollEndAt = this.activity.enrollEndAt.replace(/-/g, "/").split(':')
        this.activity.startAt = startTime[0] + ':' + startTime[1]
        this.activity.endAt = endTime[0] + ':' + endTime[1]
        this.activity.enrollStartAt = enrollStartAt[0] + ':' + enrollStartAt[1]
        this.activity.enrollEndAt = enrollEndAt[0] + ':' + enrollEndAt[1]
        this.backgroundMusic = res.backgroundMusic
        this.wechatShare()
        this.$nextTick(() => {
          document
            .getElementById("audio")
            .removeEventListener("error", this.audioError);
            document
          document
            .getElementById("audio")
            .addEventListener("error", this.audioError);
        })
        this.$nextTick(() => {
          document.getElementById("audioSource").src = res.backgroundMusic;
          if (IS_IOS) {
            this.playMusic();
          }
        })
      }, err => {
        this.isActivity = 2
      })
    },
    // 搜索
    clickSearch() {
      if (isLoading) {
        return
      }
      pageIndex = 1
      this.getPlayerList()
    },
    // 获取选手列表
    getPlayerList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      isLoading = true
      let searchList = this.searchValue.split('')
      let search = searchList[searchList.length - 1] == '号' ? searchList.splice(0, searchList.length - 1).join('') : searchList.join('')
      let url = `${global.apiurl}activity/vote/indexPlayer/${this.detailId}?page=${pageIndex}&limit=${LIMIT}&searchName=${search}`
      utilJs.getMethod(url, (res) => {
        if (pageIndex == 1) {
          this.playerList = res.data
        } else {
          this.playerList = [...this.playerList, ...res.data]
        }
        if (res.data && (res.data.length < LIMIT)) {
          this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
        isLoading = false
      }, (err) => {
        this.dataStatus = 'DATA_ERROR'
        isLoading = false
      })
    },
    // 报名
    goToSingUp() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.enrollBind) {
        if (utilJs.goBindMobile()) return;
      }
      let type = this.upgradeMemberJump == 2 ? 23 : ''
      if (this.activity.playerId == 0) {
        if (this.disableEnroll == 1 || this.disableEnroll == 2 || this.activity.isStop == 1) {
          let showtext = '';
          if (this.disableEnroll == 1) {
            showtext = '报名未开始';
          } else if (this.disableEnroll == 2) {
            showtext = '报名已结束';
          } else {
            showtext = '暂停报名';
          }
          this.$showCjToast({
            text: showtext,
            type: "warn"
          })
          return;
        }
        if (!this.activity.isSubscribe && this.activity.isAttensionAccount == 1 && this.activity.version == 1) {
          this.isVote = false
          this.showAccountQcode = true
          return
        }
        if (this.activity.isVipEnroll == 1 && this.activity.vipType == 1) {
          this.$cjConfirm({
            title: '提示',
            message: '该活动为会员专属，成为会员后可参与报名活动',
            confirmButtonText:'查看会员购买',
            onConfirm:() => {
                this.$routerGo(this, "push", {
                  path: '/member/vip/vipUp',
                  query: {
                    type
                  }
                })
              }
          })
          return
        }
        this.$routerGo(this, "push", {
          path: "/homePage/voting/playerSingUp",
          query: {
            fromPage: 1,
            id: this.detailId,
          }
        });
      } else {
        this.$routerGo(this, "push", {
          path: "/homePage/voting/contestantDetail",
          query: {
            fromPage: 1,
            id: this.playerId,
            actId: this.detailId
          }
        });
      }
    },
    // 进入排行
    goRank() {
      if (this.activity.status == 3) {
        return
      }
      this.$routerGo(this, "push", {
        path: "/homePage/voting/playerRank",
        query: {
          id: this.detailId
        }
      });
    },
    goContestantDetail(id) {
      this.$routerGo(this, "push", {
        path: "/homePage/voting/contestantDetail",
        query: {
          fromPage: 1,
          id: id,
          actId: this.detailId
        }
      });
    },
    // 进入选手详情 / 活动介绍
    goItem(id) {
      if (id == -1) { //活动介绍
        this.$routerGo(this, "push", {
          path: "/homePage/voting/contestantDetail",
          query: {
            fromPage: 2,
            voteId: this.detailId,
          }
        })
      } else { //选手详情
        this.goContestantDetail(id)
      }
    },
    playAudio() {
      if (isFirst && !IS_IOS) {
        this.playMusic();
        isFirst = false;
      }
    },
    playMusic() {
      this.isPlayingMusic = !this.isPlayingMusic;
      if (this.isPlayingMusic) {
        utilJs.audioPlayFun(document.getElementById("audio"));
      } else {
        document.getElementById("audio").pause();
      }
    },
    goVipUp() {
      let type = this.upgradeMemberJump == 2 ? 23 : ''
      this.$routerGo(this, "push", {
        path: '/member/vip/vipUp',
        query: {
          type: type
        }
      })
    },
    audioError(e) {
      this.isPlayingMusic = false;
    },
    //分享
    wechatShare: function () {
      //shareImg 分享图标
      //shareTitle 分享标题
      //shareWords 分享文案'
      let shareDesc = this.activity.shareWords ? this.activity.shareWords : `点击查看，马上参与${this.activity.name}`;
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/voting/votingActivity?id=${this.detailId}&refereeId=${localStorage.getItem("userId")}`;
      let shareImg = this.activity.shareImg ? this.activity.shareImg : this.activity.cover
      let title = this.activity.shareTitle ? this.activity.shareTitle : "票选活动，火热进行中！"
      utilJs.wechatConfig(
        shareUrl,
        title,
        shareImg,
        shareDesc,
        function () { },
        true
      );
    },
    //手机端分享
    appShare: function () {
      let shareDesc = this.activity.shareWords ? this.activity.shareWords : `点击查看，马上参与${this.activity.name}`;
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/voting/votingActivity?id=${this.detailId}&refereeId=${localStorage.getItem("userId")}`;
      let shareImg = this.activity.shareImg ? this.activity.shareImg : this.activity.cover
      let title = this.activity.shareTitle ? this.activity.shareTitle : "票选活动，火热进行中！"
      let shareData = {
        title: title,
        shareImg: shareImg,
        shareUrl: shareUrl,
        shareDesc: shareDesc
      };
      utilJs.appShareTrue(
        shareData.title,
        shareData.shareImg,
        shareData.shareUrl,
        shareData.shareDesc
      );
    },
  },
  activated() {
    // 初始化页面数据
    // if (document.getElementById("audio")) {
    //   document.getElementById("audio").src = "";
    // }
    this.detailId = this.$route.query.id || 0 //首页id
    this.searchValue = '' //搜索
    this.showSearch = false //显示搜索按钮
    this.captchaIndex = 0
    this.playerList = [] //选手列表
    this.isActivity = 0 //1.活动存在  2.活动不存在
    this.playerId = 0 //我的id
    this.playerVoteNum = 0 //累计投票
    this.hasNum = 0 //剩余投票次数
    this.onLine = true
    this.showAccountQcode = false //显示关注二维码
    isLoading = false
    this.playerIndexId = 0
    this.mpQrcodeImg = ''
    this.isShowVipTip = false
    this.backgroundMusic = ''
    this.isVipVote = ''
    this.upgradeMemberJump = ''
    pageIndex = 1
    this.activity = null
    this.showCaptcha = false //验证码投票
    this.dataStatus = 'HAS_MORE_DATA'
    this.isPlayingMusic = false
    this.isVote = false
    this.disableEnroll = 0;
    getBindPhoneSetting(130).then(res => {
      this.bindPhoneSetting = res;
    });
    this.getVote()
    this.getPlayerList()
    utilJs.toPageScrollTop()
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    if (document.getElementById("audio")) {
      document.getElementById("audio").pause();
      document.getElementById("audio").src = "";
    }
    this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<style scoped>
.vot-shaw {
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
}
.btn-search-bar {
  border-radius: 0.25rem;
  height: 1.5rem;
  font-size: 0.6rem;
  color: #9d9da1;
}
.search-bg {
  background-color: #f4f3f9;
}
.num-border {
  border-radius: 0.4rem 0 0.4rem 0;
}
.timeShow {
  color: #fff;
  line-height: 1.3rem;
  width: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
}
.num-top {
  top: -0.3rem;
}
.activities-class {
  background: linear-gradient(to left, #008cff 0%, #4baeff 100%);
  border-radius: 1rem 0 0 1rem;
}
.mt26 {
  margin-top: 0.65rem;
}
div {
  moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.mb2bg {
  background-color: #ff5946;
  box-shadow: 0px 4px 17px 0px rgba(0, 0, 0, 0.05);
}
.mb2-border {
  border: 2px solid #552813;
}
.but-bg2 {
  background-image: url("../../../assets/i/wap/voting/mb2but.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.mb2-detail-bg {
  background-image: url("../../../assets/i/wap/voting/activityDetailBg.png");
  background-repeat: no-repeat;
  padding-top: 0.25rem;
  background-size: 100%;
}
.but-bg3 {
  background-image: url("../../../assets/i/wap/voting/mb3Btn.png");
  color: #844813;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
}
.bg-size40 {
  background-size: 40%;
}
.bg-size70 {
  background-size: 70%;
}
.mb3-detail-bg {
  background-color: #ffe562;
  border-radius: 1rem 0 0 1rem;
}
.fc844813 {
  color: #844813;
}
.mb3-index-bg {
  background-color: #723bee;
}
.bgFF5947 {
  background-color: #ff5947;
}
.bgFFE562 {
  background-color: #ffe562;
}
.yqAnimation {
  animation: yqAni 3s linear infinite;
  -webkit-animation: yqAni 3s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
@keyframes yqAni {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.pause {
  animation-play-state: paused;
}
.masker {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.box {
  width: 13rem;
  height: 13.65rem;
}
.boxContent {
  height: 11.4rem;
}
</style>